MailChimp WordPress Plugin with React: Settings & Custom Post Type

We are continuing on building the MailChimp WordPress plugin. Now that the base of our plugin is set we can continue on creating the settings page and a custom post type Form that will hold our list information.

This tutorial is part of a series MailChimp WordPress Plugin with React:

1. MailChimp WordPress Plugin with React: Introduction
2. MailChimp WordPress Plugin with React: Settings & Custom Post Type
3. MailChimp WordPress Plugin with React: Metabox and MailChimp Lists
4. MailChimp WordPress Plugin with React: MailChimp Form and Subscription
5. MailChimp WordPress Plugin with React: MailChimp Widget
6. MailChimp WordPress Plugin with React: AJAX and React

Remember that every code you use from this article can be used in any of your commercial and personal projects.

The Settings Page

Our settings page will hold our api key information and it will be the container for any future settings we could add for our MailChimp WordPress plugin. Create a new file settings.php inside the inc folder.

Once created we will have to include it in our MWP class:

Hooking to Admin

WordPress will create our settings page and show it only in the admin area of our site. Because of that we will have to register our settings page only in the admin area. This is done by using the action hook admin_init. Let’s create a new method in our MWP class called hooks.

This method will contain some of the main hooks that are used in our MailChimp WordPress plugin. This method will be called right after our main class includes all of the required files. So, let’s extend the mwp_run function at the bottom of the main plugin’s file:

If you try to run this now in the admin area, it will give you an error that the function mwp_settings is not set. We will do that now.

Settings Functions

We have to add a settings page by using the WordPress function add_options_page(). Add this code to the file settings.php:

The parameters we have provided here are:

• MWP – Page Title
• MWP – Menu Title
• manage_options – Capability that a user has to have to see this menu
• mwp-settings – Menu slug
• mwp_settings_page – Function name to be called when visiting that menu

Now you can see a new menu item MWP under menu Settings.

At the end of that file we have created the function mwp_settings_page that we will define next. In this function we will create some simple HTML to hold our label and the input to insert the MailChimp API key.

We will also have the logic to save that data. Let’s add the rest of the code for that page:

The first lines are checking if we have submitted the form. This is done by checking if the save button is set in the superglobal $_POST variable. If it is, then our form is submitted and we can save the MailChimp API key.

We are saving the API key in the option mwp_mailchimp_api_key and also displaying a success message to the user who has saved the data.

At the end we are also getting the new data from the database using the function get_option.

The rest of the code is mostly HTML with some PHP or WordPress functions. The WordPress function used here is the _e() function used for translating strings.

Now we can use the option mwp_mailchimp_api_key to get the API key for communicating with the MailChimp API.

The Form Custom Post Type

Our custom post type will be a form. We will use that form in widgets and shortcodes for displaying the form. This will give a modularity and ability to display the form with the MailChimp list attached to it in various parts of our site.

To register our custom post type, we need to create a new file cpt-form.php in the inc folder. Include that file under the settings.php in our includes method:

When registering a custom post type, we have to register that function in the action hook init. We will add that in our previously made method hooks:

If we refresh our site, we would end up with another error on both admin and front areas of our site. Open the file cpt-form.php and add this code to register our custom post type:

Now you can find a new menu item in our admin area by the name: MWP Form.

Conclusion

In this tutorial we have learned how to create a simple settings page for our MailChimp WordPress plugin that will contain every global setting we could need for our plugin to work properly. The custom post type Forms is a modular part of our plugin that we can use for various parts and functionalities of our site. In the next tutorial we will create a simple metabox for our custom post type that will contain a dropdown of lists from MailChimp.

Become a Sponsor